<template>
	<view class="content">
		<button class="btnn" @click="goUrl('/pages/index/warehouse')"></button>
		<!-- 顶部样式盒子 -->
		<view class="bgnew">
			<image class="title" src="/static/index/newindextitle.png"></image>
			<image class="newbg" src="/static/index/newindexpeo.png"></image>
			<!-- <view class="bottom-shop">
				<swiper
					class="swipera"
					display-multiple-items="5"
					circular="true"
					previous-margin="-120rpx"
					next-margin="-120rpx"
					:current="currentIndex"
					@change="swiperChange"
					indicator-active-color="red"
					v-if="showBildList&&blindList.length>5"
				>
					<block v-for="(item, index) in blindList" :key="index">
						<swiper-item class="sitem" :data-current="index" @click="clickChang" >
							<view class="box" :class="{ current: index == curo }">
								<image :src="item.imgUrl"></image>
								<view class="text">{{item.name}}</view>
							</view>
						</swiper-item>
					</block>
				</swiper>
				<view class="swiperb" v-if="showBildList&&blindList.length<=5">
					<view class="sitem" v-for="(item, index) in blindList" :key="index" :style="{transform: blindList.length==5?(curo==0?'translateX(0rpx)':curo==4?'translateX(-0rpx)':'translateX(0)'):'0'}" :data-current="index" @click="clickChangy">
						<view class="box" :class="{ current: index == currentIndex  }">
							<image :src="item.imgUrl"></image>
							<view class="text">{{item.name}}</view>
						</view>
					</view>
				</view>
			</view> -->
		</view>
		<!-- 热门盲盒 -->
		<view class="shop">
			<block v-if="navList.orderList.length > 0">
				<view class="item" v-for="(item,index) in navList.orderList" :key="index" @click="goDetails(item.id)">
					<view class="left">
						<image :src="item.imageUrl"></image>
					</view>
					<view class="right">
						<view class="titlea">
							<view class="aa sl1">{{item.name}}</view>
							<view class="bb">抽好物</view>
						</view>
						<view class="jj sl1">{{item.description}}</view>
						<view class="price-box">
								<view class="text1">
									<text>￥{{item.price}}</text>
								</view>
							<view class="b1">保底中</view>
								<view class="b2">{{item.priceRange}}</view>
						</view>
						<scroll-view scroll-x class="scrollx">
							<view class="itemx" v-for="(ited,indexd) in item.goodsList" :key="indexd">
								<view class="img">
									<image :src="ited.imgUrlList[0]" ></image>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<uni-load-more :status="navList.loadingType"></uni-load-more>
			</block>
			<block v-else>
				<my-kong></my-kong>
			</block>
		</view>
	</view>
</template>

<script>
var _this;
import { priceInteger,debounce } from "@/utils";
export default {
	data() {
		return {
			pageSize: 10, //每页条数
			navList: {
				loadingType: 'more',
				page: 1,
				orderList: [],
			},
			currentIndex: 0,
			curo: 2,
			showBildList: false,
			blindList: [],
		};
	},
	onLoad(options) {
		_this = this
		_this.getBlindList();
		_this.loadData();
		if(options.id&&!_this.$cookie.get('token')){
			_this.$cookie.set('bindingId',options.id);
		}
		if (options.agentId) {
			_this.$cookie.set('agentId', options.agentId);
		}
	},
	onShow() {},
	// 上拉加载
	onReachBottom() {
		_this.loadData();
	},
	methods: {
		//获取订单列表
		loadData(source) {
			var navItem = _this.navList;
			//这里是将订单挂载到tab列表下
			if (navItem.loadingType === 'loading') {
				//防止重复加载
				return;
			}
			if (navItem.loadingType === 'noMore') {
				return; //防止数据没有了还在加载
			}
			navItem.loadingType = 'loading';
			_this.$HTTP({
				method: 'GET',
				url: 'shopServer/box/getStarBox',
				data: {
					limit: _this.pageSize,
					page: navItem.page,
					time: Date.parse(new Date())
				}
				// header:'form'
			}).then(res => {
				navItem.page++;
				res.forEach((item,index,arr) => {
					item.price = priceInteger(item.price);
				});
				if (source == 'reset') {
					navItem.orderList = res;
				} else {
					res.forEach(item => {
						navItem.orderList.push(item);
					});
				}
				//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
				_this.$set(navItem, 'loaded', true);
				
				if (res.length < _this.pageSize) {
					navItem.loadingType = 'noMore';
					return;
				}
				
				navItem.loadingType = 'more';
			}).catch(err => {
				console.log(err);
			});
		},
		goDetails(id){
			const {aplus_queue} = window;
			aplus_queue.push({
			 action: 'aplus.record',
			  arguments: ['clickBox','1']
			});
			uni.navigateTo({
				url: '/pages/index/blindDetail?id='+id
			});
		},
		goUrl(url){
			_this.$routerTo.navigateTo({
				path: url
			});
		},
		swiperChange(event) {
			let a = 2;
			_this.currentIndex = event.detail.current;
			_this.curo = event.detail.current + a;
			if (event.detail.current > _this.blindList.length - 2 - 1) {
				_this.curo = event.detail.current - _this.blindList.length + 2;
			}
		},
		clickChang:debounce(function(event){
			let a = -2;
			var index = event.currentTarget.dataset.current;
			_this.currentIndex = index + a;
			if (index < 2) {
				_this.currentIndex = index + _this.blindList.length - 2;
			}
		},500),
		clickChangy:debounce(function(event){
			var index = event.currentTarget.dataset.current;
			_this.currentIndex = index;
		},500),
		getBlindList() {
			_this.$HTTP({
				method: 'GET',
				url: 'shopServer/star/getList',
				data: {
					time: Date.parse(new Date())
				}
				// header:'form'
			}).then(res => {
				if(res.length<6){
					_this.curo=0;
				}
				res.forEach((item, index) => {
					item.aaa=index+2;
					if(item.aaa>res.length-1){
						item.aaa=item.aaa-res.length;
					}
				})
				_this.showBildList = true;
				_this.blindList = res;
			}).catch(err => {
				console.log(err);
			});
		},
	}
};
</script>

<style>
page{
	background: #EAF9FF;
}
</style>
<style lang="scss" scoped>
.content {
	width: 100%;
	position: relative;
	.btnn{
		width: 176rpx;
		height: 72rpx;
		position: fixed;
		right: 30rpx;
		top: 70%;
		z-index: 5;
		background-image: url('../../static/index/erty.png');
		background-size: 100% 100%;
	}
	.bgnew{
		width: 100%;
		height: 100vh;
		background-image: url('https://home.miaokaikeji.com/web/applet/newimg/indexbgnew.png');
		background-size: 100% 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		transform: translateY(-100rpx);
		.title{
			width: 212rpx;
			height: 99rpx;
			margin: 122rpx 0 0 26rpx;
		}
		.newbg{
			width: 100%;
			height: 456rpx;
		}
		.sitem {
			width: 188rpx;
			height: 252rpx;
			display: flex;
			align-items: flex-end;
			justify-content: center;
		}
		.bottom-shop {
			width: 100vw;
			margin: -120rpx 0 0 0;
			.swipera {
				width: 100%;
				height: 252rpx;
				.current {
					z-index: 10;
					transition: all 0.2s ease-in 0s;
					width: 180rpx !important;
					height: 244rpx !important;
					background: #FFE03B !important;
					border-radius: 34rpx !important;
					image {
						width: 180rpx !important;
						height: 180rpx !important;
					}
					.text{
						font-size: 31rpx !important;
						color: #000000 !important;
						font-weight: bold;
					}
				}
				.box{
					width: 164rpx;
					height: 222rpx;
					overflow: hidden;
					background: #000020;
					border-radius: 31rpx;
					border: 2rpx solid #000000;
					image {
						width: 164rpx;
						height: 160rpx;
						border-radius: 31rpx;
					}
					.text{
						width: 100%;
						margin-top: 10rpx;
						text-align: center;
						font-size: 28rpx;
						color: #FFFFFF;
					}
				}
			}
			.swiperb{
				width: 100%;
				height: 252rpx;
				display: flex;
				overflow: hidden;
				overflow-x: scroll;
				.current {
					z-index: 10;
					transition: all 0.2s ease-in 0s;
					width: 180rpx !important;
					height: 244rpx !important;
					background: #FFE03B !important;
					border-radius: 34rpx !important;
					image {
						width: 180rpx !important;
						height: 180rpx !important;
					}
					.text{
						font-size: 31rpx !important;
						color: #000000 !important;
						font-weight: bold;
					}
				}
				.box{
					width: 164rpx;
					height: 222rpx;
					overflow: hidden;
					background: #000020;
					border-radius: 31rpx;
					border: 2rpx solid #000000;
					image {
						width: 164rpx;
						height: 160rpx;
						border-radius: 31rpx;
					}
					.text{
						width: 100%;
						margin-top: 10rpx;
						text-align: center;
						font-size: 28rpx;
						color: #FFFFFF;
					}
				}
			}
		}
		uni-swiper-item {
			overflow: inherit; //改为默认的就行
		}
	}
	.shop{
		width: 100%;
		box-sizing: border-box;
		padding: 0 24rpx 0 24rpx;
		z-index: 2;
		position: absolute;
		left: 0;
		top: 460rpx;
		.item{
			width: 100%;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-top: 24rpx;
			box-sizing: border-box;
			padding: 24rpx 0 24rpx 18rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left{
				width: 230rpx;
				height: 270rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				image{
					width: 230rpx;
					height: 230rpx;
				}
			}
			.right{
				width: 100%;
				margin-left: 30rpx;
				height: 270rpx;
				position: relative;
				.titlea{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 2rpx;
					.aa{
						width: calc(100% - 150rpx);
						font-size: 32rpx;
						font-weight: bold;
						color: #212444;
					}
					.bb{
						width: 125rpx;
						height: 40rpx;
						line-height: 40rpx;
						text-align: center;
						background-image: url('https://home.miaokaikeji.com/web/applet/newimg/reward-xiaobg.png');
						background-size: 100% 100%;
						font-size: 22rpx;
						color: #FFFFFF;
					}
				}
				.jj{
					width: 100%;
					margin-top: 15rpx;
					font-size: 24rpx;
					color: #999999;
				}
				.price-box{
					width: 100%;
					margin-top: 30rpx;
					display: flex;
					align-items: center;
					.text1{
						font-size: 30rpx;
						font-weight: bold;
						color: #DE1530;
						display: flex;
						align-items: center;
						image{
							width: 32rpx;
							height: 32rpx;
							margin-right: 5rpx;
						}
					}
					.b1{
						width: 100rpx;
						height: 36rpx;
						line-height: 36rpx;
						text-align: center;
						background: linear-gradient(270deg, #FF624C 0%, #FF3B82 100%);
						font-size: 20rpx;
						color: #FFFFFF;
						margin-left: 10rpx;
						font-weight: bold;
					}
					.b2{
						width: 170rpx;
						height: 36rpx;
						line-height: 36rpx;
						text-align: center;
						background: rgba(255, 62, 62, 0.08);
						font-size: 20rpx;
						font-weight: bold;
						color: #FF3E7E;
					}
				}
				.scrollx{
					width: calc(100% - 20rpx);
					white-space: nowrap;
					position: absolute;
					left: 0;
					bottom: 0;
					.itemx{
						display: inline-block;
						width: 80rpx;
						height: 80rpx;
						background: #F5F5F5;
						margin-right: 20rpx;
						.img{
							width: 80rpx;
							height: 80rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							image{
								height: 80rpx;
								height: 50rpx;
							}
						}
					}
				}
			}
		}
	}
}
</style>
